import 'package:flutter/material.dart';

main(){
  runApp(Demo63App());
}

class Demo63App extends StatefulWidget {
  const Demo63App({Key? key}) : super(key: key);

  @override
  _Demo63AppState createState() => _Demo63AppState();
}

class _Demo63AppState extends State<Demo63App> with SingleTickerProviderStateMixin {

  List<Tab> _tabs = [
    Tab(text: '明教',),
    Tab(text: '霸道',),
    Tab(text: '天策',),
    Tab(text: '纯阳',),
    Tab(text: '少林',),
    Tab(text: '长健',),
    Tab(text: '七秀',),
    Tab(text: '五毒',),
    Tab(text: '天门',),
    Tab(text: '唐门',),
    Tab(text: '武当',),
    Tab(text: '昆仑',),
  ];

  TabController? _tabController ;

  @override
  void dispose() {
    _tabController?.dispose();//销毁
  }

  @override
 void initState() {
    _tabController = new TabController(length: _tabs.length, vsync: this);

    _tabController?.addListener(() {
      print('选中的角标:${ _tabController?.index}');
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(

      home: Scaffold(

        appBar: AppBar(

          title: Row(
            children: [
              Expanded(
                child: TabBar(
                  controller: _tabController,
                  tabs: _tabs,
                  indicatorColor: Colors.purpleAccent,
                  isScrollable: true,
                ),
              )
            ],
          ),

        ),

        body: TabBarView(
          controller: _tabController,
          children: _tabs.map((e) {
            return Center(child: Text(e.text??"其他"),);
          }).toList(),
        ),
      ),

    );
  }
}
